<script setup>
import { onMounted, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import commonModel from '@/http/modules/common.js'
import { enumStore } from '@/store/enum'
import { storeToRefs } from 'pinia'
import Utility from '@/utils/utility'
import Toast from '@/components/toast'

const route = useRoute()
const router = useRouter()
const enum_store = enumStore()
const { enumDslInfo } = storeToRefs(enum_store)
const info = ref({})
function getInfo() {
  // tradeModel
  //   .getEnterDetail({
  //     domainId: route.params.id,
  //   })
  commonModel
    .gatewayApi({
      bizContent: {
        token: sessionStorage.token,
        inSerialNo: route.params.id,
      },
      service: 'cb_trade_incoming_detail',
      version: '1.0.0',
    })
    .then((res) => {
      info.value = res
    })
}
// 重新提交
function hanldeAgain() {
  router.push(`/contract/connection/${route.params.id}?type=again`)
}
// 关联合同订单
function hanldeContract() {
  router.push(`/contract/connection/${route.params.id}`)
}
//显示驳回原因
function handleShowResultDialog(reason) {
  Toast.open({
    type: 'none',
    title: '驳回原因：',
    className: 'rejection__dialog_detail',
    content: reason,
    showClose: true,
    showCancel: false,
    confirmFun: () => {
      Toast.close()
    },
  })
}
onMounted(() => {
  getInfo()
})
</script>

<template>
  <div class="enter-detail">
    <div class="enter-detail-base">
      <div class="enter-detail-base-top">
        <div style="width: 100%">
          <div class="status">
            <span>{{
              Utility.getLabelByValue(
                enumDslInfo.IncomingAuditStatus,
                info.auditStatus
              )
            }}</span>
            <div
              v-if="info.auditStatus === 'Initial'"
              class="base-btn fz-12"
              @click="hanldeContract"
            >
              关联合同订单
            </div>
            <div
              v-if="info.auditStatus === 'Returned'"
              class="base-btn fz-12"
              @click="hanldeAgain"
            >
              重新提交
            </div>
          </div>
          <div class="price fm-d-blod">
            <span>{{ $filters.formatMoney(info.payeeAmount) }} </span>
            {{ info.payeeCurrency
            }}{{
              Utility.getLabelByValue(
                enumDslInfo.CurrencyType,
                info.payeeCurrency
              )
            }}
          </div>
        </div>
        <!-- 待关联合同订单 -->
        <!-- 待关联订单状态展示“关联合同订单”
        待跟进状态展示“重新提交” -->
      </div>
      <div class="base-row fz-14">
        <span>入款时间</span>
        {{ info.gmtCreate }}
      </div>
      <div class="base-row fz-14">
        <span>入账流水号</span>
        {{ info.inSerialNo }}
      </div>
      <div class="base-row fz-14">
        <span>打款人</span>
        {{ info.payerName }}
      </div>
      <div class="base-row fz-14">
        <span>收款账户</span>
        {{ info.vaNo }}
      </div>
    </div>
    <div
      v-for="(item, index) in info.relContractList"
      :key="index"
      class="contract"
    >
      <div class="contract-base fz-14">
        <div class="contract-base-info">
          <p>
            合同编号:
            <span
              @click="router.push(`/contract/detail/${item.contractOrderNo}`)"
              >{{ item.contractNo }}</span
            >
          </p>
          <p class="fz-12">
            <span>{{ item.declType === 'Y' ? '报关单' : '非报关单' }}</span>
            <span v-if="item.setExc === 'Y'">结汇</span>
          </p>
        </div>
        <span
          class="bold"
          :style="{ color: item.whetherShip === 'Y' ? '#999' : '#000' }"
          >{{ item.whetherShip === 'Y' ? '已发货' : '未发货' }}</span
        >
      </div>
      <div class="contract-price fz-14">
        <span>关联金额: </span>
        {{ $filters.formatMoney(item.relAmount) }}
        {{ info.payeeCurrency }}
        <p class="bold">
          {{
            Utility.getLabelByValue(
              enumDslInfo.ContractOrderStatus,
              item.status
            )
          }}
        </p>
      </div>
      <!-- 待跟进状态显示驳回原因 -->
      <div v-if="item.status === 'Returned' " class="contract-tips fz-12" @click="handleShowResultDialog(item.reason)">
        <i class="iconfont icon-gantanhaoicon"></i>
        驳回原因: {{ item.reason }}
      </div>
    </div>

    
  </div>
</template>

<style  lang="scss">
.enter-detail {
  .bold {
    font-weight: bold;
  }
  padding: 0.1rem 0.12rem 0;
  &-base {
    padding: 0 0.12rem 0.1rem;
    background: #fff;
    border-radius: 0.04rem;
    &-top {
      @include fh;
      justify-content: space-between;
      height: 1rem;
      border-bottom: 1px solid #eee;
      // .status {
      // }
      .price {
        color: #222;
        span {
          font-size: 0.36rem;
          font-weight: bold;
        }
      }
      .base-btn {
        color: #3f84f3;
        border: 1px solid #3f84f3;
        border-radius: 0.14rem;
        padding: 0.04rem 0.12rem;
      }
      .status {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 0.14rem;
      }
    }
    .base-row {
      @include fh;
      margin-top: 0.1rem;
      color: #999;
      span {
        width: 0.85rem;
      }
    }
  }
  .contract {
    background: #fff;
    border-radius: 0.08rem;
    overflow: hidden;
    margin-top: 0.1rem;
    &-base {
      @include fh;
      justify-content: space-between;
      min-height: 0.64rem;
      padding: 0 0.12rem;
      background: linear-gradient(270deg, #eff4f8 0%, #dde5ec 100%);
      &-info {
        p:nth-of-type(1) {
          color: #748291;
          span {
            color: #222;
          }
        }
        p:nth-of-type(2) {
          @include fh;
          margin-top: 0.08rem;
          span {
            color: #fff;
            background: #a5b3c1;
            border-radius: 0.04rem;
            margin-right: 0.04rem;
            padding: 0 0.04rem;
          }
        }
      }
    }

    &-price {
      @include fh;
      height: 0.38rem;
      padding: 0 0.12rem;
      span {
        color: #999;
      }
      p {
        margin-left: auto;
        color: #faa64e;
      }
    }

    &-tips {
      // @include wh(3.27rem, 0.38rem);
      // @include fh;
      width: 90%;
      height: 0.16rem;
      line-height: 0.16rem;
      margin: 0 auto;
      border-top: 1px solid #eee;
      color: #f41d1d;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding: 0.1rem 0 0.3rem;
    }
  }
  
}

.toast-cover.rejection__dialog_detail {
  .toast-box {
    .toast-title {
      margin: 0;
      text-align: left;
      color: #999999;
    }
    .toast-content {
      font-size: 14px;
      color: #222222;
      line-height: 18px;
      margin-top: 8px;
      text-align: left;
      white-space: pre-line;
      word-wrap: break-word;
    }
  }
}


</style>
